<template>

  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-button style="float: left; padding: 3px 0" type="text" @click="reset">重置</el-button>
      <span>购物包裹</span>
      <el-button style="float: right; padding: 3px 0" type="text" @click="toPay">去结算</el-button>
    </div>
    <div v-for="item in cartItems" v-if="item.count>0" class="text item">

      <span style="float: left;" v-text="item.title"></span>
      <!--计数器:份数-->
      <el-input-number size="mini" :min="0" v-model="item.count"></el-input-number>
      <!--价格:单价乘数量-->
      <span style="float: right;" v-text="item.price*item.count"></span>

    </div>
    <el-divider></el-divider>
    <div class="clearfix">
      <span>总价格</span>
      <span>{{ totalPrice }}</span>
    </div>
  </el-card>
    
</template>

<script>
    export default {
        name: "Cart",
      props: {
        cartList: Array
      },
      data() {
        return {
          cartItems: this.cartList,
        }
      },
      computed: {
        //  返回购物清单总价格
        totalPrice() {
          let total = 0;
          // console.log(this.cartList.length);
          if (this.cartItems != null) {
            for (let i=0;i<this.cartItems.length;i++){
              // console.log(this.cartItems[i].count*this.cartItems[i].price);
              total=total+this.cartItems[i].count*this.cartItems[i].price;
            }
          }
          return total;
        }
      },
      methods: {
        toPay: function () {
          console.log("去结算");
          console.log(this.cartItems);
          this.$emit("to-pay", this.cartItems);
        },
        reset: function () {
          console.log("重置");
          this.$emit("reset-cart");
          this.cartItems.splice(0);
        }
      }
    }
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 300px;
  }</style>
